import React from "react";
import { View, Text, Image, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
import { useNavigation } from "@react-navigation/native";

const MallDiscount = () => {
    const styles = StyleSheet.create({
        box:{
            width: '100%',
            display:'flex',
            marginTop:125,
            padding: 10,
            backgroundColor: '#fff',
            flexDirection: 'row',
            flexWrap: 'wrap',
            justifyContent: 'space-between',
        },
        item:{
            width: '49%',
            padding: 10,
            borderWidth: 1,
            marginBottom: 10,
            borderRadius: 10,
            //阴影
            shadowColor: '#000',
            shadowOffset: { width: 10, height: 10 },
            shadowOpacity: 0.1,//透明度
            shadowRadius: 3,//安卓阴影
            elevation: 2,//安卓阴影
            borderColor: '#eee',
            backgroundColor: '#fff',
            height: 165,
        },
        toptext:{
            display: 'flex',
        }

    })
    return (
        <View style={styles.box}>
            {/* item */}
            <View style={styles.item}>
                    {/* top  */}
                    <View >
                        <View style={{display: 'flex', flexDirection: 'row', alignItems:'center'}}>
                        <Text style={{fontSize: 18, color: '#000',fontWeight: 'bold',marginRight:10}}>限时购</Text>
                        <View style={{display: 'flex', flexDirection: 'row',alignItems: 'center'}}>
                            <Text style={{padding:5,borderRadius:8,backgroundColor:'red',color:'#fff',fontSize:12}}>44</Text>
                            <Text>:</Text>
                            <Text style={{padding:5,borderRadius:8,backgroundColor:'red',color:'#fff',fontSize:12}}>44:</Text>
                            <Text>:</Text>
                            <Text style={{padding:5,borderRadius:8,backgroundColor:'red',color:'#fff',fontSize:12}}>44</Text>
                        </View>
                        </View>
                        <Text style={{fontSize:13,color:'#999'}}>限时限量 低价疯抢</Text>
                    </View>
                    {/* bottom */}
                    <View style={{display:'flex',alignItems:'center',flexDirection:'row',justifyContent:'space-between'}}>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 80, borderRadius: 5}}></Image>
                            <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥67</Text>
                        </View>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 80, borderRadius: 5}}></Image>
                            <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥54</Text>
                        </View>
                    </View>
            </View>
            {/* 福利社 */}
            <View style={styles.item}>
                    {/* top  */}
                    <View >
                        <View style={{display: 'flex', flexDirection: 'row', alignItems:'center'}}>
                        <Text style={{fontSize: 18, color: '#000',fontWeight: 'bold',marginRight:10}}>福利社</Text>
                        <View style={{display: 'flex', flexDirection: 'row',alignItems: 'center'}}>
                            <Text style={{padding:5,borderRadius:15,backgroundColor:'red',color:'#fff',fontSize:12}}>自营</Text>
                        </View>
                        </View>
                        <Text style={{fontSize:13,color:'#999'}}>赫莲娜绿宝瓶￥958</Text>
                    </View>
                    {/* bottom */}
                    <View style={{display:'flex',alignItems:'center',flexDirection:'row',justifyContent:'space-between'}}>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥67</Text> */}
                        </View>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥54</Text> */}
                        </View>
                    </View>
            </View>
            {/* 好物刊 */}
            <View style={styles.item}>
                    {/* top  */}
                    <View >
                        <View style={{display: 'flex', flexDirection: 'row', alignItems:'center'}}>
                        <Text style={{fontSize: 18, color: '#000',fontWeight: 'bold',marginRight:10}}>好物刊</Text>
                        <View style={{display: 'flex', flexDirection: 'row',alignItems: 'center'}}>
                            <Text style={{padding:5,borderRadius:15,backgroundColor:'#4292E6',color:'#fff',fontSize:12}}>NEW</Text>
                        </View>
                        </View>
                        <Text style={{fontSize:13,color:'#999'}}>达人爱用 新晋好物推荐</Text>
                    </View>
                    {/* bottom */}
                    <View style={{display:'flex',alignItems:'center',flexDirection:'row',justifyContent:'space-between'}}>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥67</Text> */}
                        </View>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥54</Text> */}
                        </View>
                    </View>
            </View>
            {/* 新品册 */}
            <View style={styles.item}>
                    {/* top  */}
                    <View >
                        <View style={{display: 'flex', flexDirection: 'row', alignItems:'center'}}>
                        <Text style={{fontSize: 18, color: '#000',fontWeight: 'bold',marginRight:10}}>新品册</Text>
                        </View>
                        <Text style={{fontSize:13,color:'#999'}}>每日新品 专业测评</Text>
                    </View>
                    {/* bottom */}
                    <View style={{display:'flex',alignItems:'center',flexDirection:'row',justifyContent:'space-between'}}>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥67</Text> */}
                        </View>
                        <View style={{alignItems:'center'}}>
                            <Image source={require('../../assets/images/kh.webp')} style={{width: 80, height: 90, borderRadius: 5}}></Image>
                            {/* <Text style={{fontSize:16,color:'red',marginTop:3,fontWeight:'bold'}}>￥54</Text> */}
                        </View>
                    </View>
            </View>
        </View>
    )
}
export default MallDiscount;
